<template>
    <div>

        <el-row class="unifined-row-collect">
  
                <div class="parameter  flex unified-flex-space-around">
                    <div class="params unified-bg-white flex unified-flex-align unified-flex-space-between"
                        v-for="(item,index) in list" :key="index">

                        <div class="params-item flex unified-flex-align unified-flex-space-between">
                            <div class="key-input">
                                <el-input v-model="item.key" placeholder="请输入参数"></el-input>
                            </div>
                            <div class="value-input">
                                <el-input v-model="item.value" placeholder="请输入参数内容"></el-input>
                            </div>
                            <el-button size="small" type="danger" icon="el-icon-delete" circle @click="Remove(index)"></el-button>
                        </div>

                    </div>

                </div>
                <div class="add-params flex unified-flex-align unified-flex-center unified-cursor-default unified-text-select" @click="Add">
                    添加参数
                </div>
        </el-row>


    </div>
</template>

<script>
    export default {
        props: {
            leftWidth: {
                type: Number,
                default: 4
            },
            list: {
                type: Array,
                default () {
                    return [{}]
                }
            }
        },
        methods: {
            Add() {
                this.$emit('add')
            },
            Remove(index) {
                this.$emit('remove', index)
            }
        },
        data() {
            return {
                itemlist: []
            }
        }
    }
</script>

<style scoped="scoped">
    

    .parameter {
        width: 100%;
        flex: 1;
        background-color: #C3C3C324;
        flex-wrap: wrap;
        align-content: flex-start;
        box-sizing: border-box;
    }

    .params-item {
        width: 100%;
        height: 100%;
        background-color: #fff;
    }

    .value-input {
        margin: 0px 15px;
    }

    .value-input,
    .key-input {
        flex: 1;
        height: 100%;
        background-color: #fff;
    }
    .params {
        width: 100%;
        font-size: 12px;
        height: 60px;
        line-height: 60px;
        border-bottom: 1px solid #c3c3c344;
        box-sizing: border-box;
    }
    .add-params{
        width: 100%;
        height: 60px;
        background-color: #C3C3C3;
        border-radius: 10px;
        margin-top: 15px;
    }
    .parameterItem-title {
        font-size: 14px;
        color: #000;
        margin-left: 8px;
    }

    .parameterItem-value {
        font-size: 8px;
        color: #82939C;
        height: 28px;
        outline: none;
        border: none;
        border: 1px solid #C3C3C388;
        /* text-align: right; */
        height: 25px;
        line-height: 25px;
        border-radius: 6px;
        font-size: 8px;
        width: 140px;
    }

    .parameterItem-value:focus {
        /* text-align: left; */
        border: 1px solid #2269F3;
    }


    .parameterItem-value[disabled="disabled"] {
        /* background-color: transparent;
		border: none; */
    }

    select {
        outline: none;
        border: 1px solid #c3c3c344;
        border-radius: 15px;
        /* width: auto; */
        text-align: center;
        padding: 0px 15px;
        /* background-color: #0081FF; */
        height: 30px;
        appearance: none;
        -webkit-appearance: none;
    }

    select option {
        text-align: center;
    }

    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }
</style>
